<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>
<head>
  <base href="<%=basePath%>">
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=no, shrink-to-fit=no">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <meta name="apple-mobile-web-app-capable" content="no" />
  <meta name="format-detection" content="telephone=no">
  <title>${goodsDetail.title }</title>
  <script src="static/js/cssrem.js"></script>
<link href="static/css/style.css" rel="stylesheet">
</head>

<body>
  <div class="content ovh">
    <div class="goods-main mod-goods">
      <div class="wrapper">
        <!-- Banner -->
        <div class="banner">
          <div class="swiper-container">
            <div class="swiper-wrapper">
            	<c:forEach items="${img}" var="imgs">
					<div class="swiper-slide photo100">
						<img src="${imgs}" alt="">
					</div>
				</c:forEach>
            </div>
            <div class="swiper-pagination"></div>
          </div>
        </div>
        <!-- 商品信息 -->
        <dl class="goods-info bgwh">
          <dt class="pl20 cell">
            <div class="cell-bd mr20 pr20">
              <p class="f26 g6">(第${goodsDetail.time }期)</p>
              <p class="f34 pt10 js-title ">${goodsDetail.title }</p>
            </div>
            <div class="cell-fd">
              <span class="cell-fd price">
                <em class="f30 b pr5">￥</em>
                <em class="js-price">${goodsDetail.price }</em>
              </span>
            </div>
          </dt>
          <dd class="reward">
            <dl class="item">
              <dt class="f26 g9">
                <span class="icon-reward--01 dib vm mr10"></span>
                <span class="dib vm">预计产量:</span>
              </dt>
              <dd>${goodsDetail.expectHarvest }${goodsDetail.harvestUnitDesc }</dd>
            </dl>
            <dl class="item">
              <dt class="f26 g9">
                <span class="icon-reward--02 dib vm mr10"></span>
                <span class="dib vm">认养周期:</span>
              </dt>
              <dd>${goodsDetail.equityCycle }个月</dd>
            </dl>
          </dd>
        </dl>
        <!-- 选购 -->
        <dl class="income-rules goods-stock">
          <dt>产品库存信息：</dt>
          <dd class="income-rules-depict">
            <div class="stage tc f0">
              <h4 class="f30">${goodsDetail.stockNum }${goodsDetail.unitDesc }</h4>
              <span class="g9 f22">剩余数量</span>
            </div>
            <div class="schedule">
              <div class="dib rel">
                <div class="column">
                  <div class="current" style="width:${goodsDetail.saleNum*100/(goodsDetail.stockNum +goodsDetail.saleNum)}%"></div>
                </div>
                <div class="place" style="left:${goodsDetail.saleNum*100/(goodsDetail.stockNum +goodsDetail.saleNum)}%"></div>
                <div class="start f22 g9">0株</div>
                <div class="total g9 f0">
                  <p class="f22">${goodsDetail.saleNum }${goodsDetail.unitDesc }</p>
                  <p class="f20">(已售)</p>
                </div>
              </div>
            </div>
          </dd>
        </dl>
        <div class="mod-buy bgwh">
          <div class="cell">
            <div class="cell-hd g6 f26 pl0">购买数量</div>
            <div class="cell-bd">
              <div class="mod-number g3">
                <span class="btn-number number-decrease ion-ios-minus-empty f40"></span>
                <input type="hidden" id="submitToken" value="${submitToken }">
                <input class="number-input tc number-form" type="tel" min="${goodsDetail.minShopNum }" max="${goodsDetail.maxShopNum }" value="${goodsDetail.minShopNum }">
                <span class="btn-number number-increase ion-ios-plus-empty f40"></span>
              </div>
            </div>
          </div>
        </div>
        <!-- 收益规则 -->
        <dl class="income-rules">
          <dt>产品收益规则：</dt>
          <dd class="income-rules-depict">
            <div class="stage tc f0">
              <h4 class="f30">${goodsDetail.stage }个阶段</h4>
              <span class="g9 f22">收益时段</span>
            </div>
            <div class="stage-next">
              <span class="icon-countdown dib vm"></span>
              <span class="f0 dib vm">
                <span class="g6 f26">距离下一阶段：</span>
                <em class="g3 f28">约${goodsDetail.day }天</em>
              </span>
            </div>
          </dd>
          <dd class="schedule">
          <c:forEach items="${gsth}" var="gsth" varStatus="status">
            <div class="schedule-item past tc <c:if test="${gsth.state eq '00' }">active</c:if>">
              <div class="point">
                <span class="dib">${status.index } </span>
              </div>
              <p class="f24">${gsth.expectHarvestTime }</p>
              <p class="f22">约${gsth.expectHarvest }${goodsDetail.harvestUnitDesc }</p>
            </div>
            </c:forEach>
          </dd>
        </dl>
        <!-- 种植信息 -->
        <div class="planting-info mt20 bgwh">
          <h5 class="n f0">
            <span class="dib vm f26 ml10 mr10">种植信息</span>
          </h5>
          <div class="planting-info-box">
            <ul class="planting-info-list">
              <li class="planting-info-item">
                <div class="name">种植日期：</div>
                <div class="value">${goodsDetail.birthday }</div>
              </li>
              <li class="planting-info-item">
                <div class="name">植株年龄：</div>
                <div class="value">${goodsDetail.treeAge }年</div>
              </li>
              <li class="planting-info-item">
                <div class="name">到期时间：</div>
                <div class="value">${goodsDetail.endUseTime }</div>
              </li>
            </ul>
          </div>
        </div>
        <!-- tips -->
        <div class="tips-more js-tips tc">
          <span class="js-icon dib vm ion-chevron-down ion-chevron-up g9"></span>
          <span class="tips-more__text g0 f24 dib vm">上拉查看图文详情</span>
        </div>
      </div>
    </div>
    <!--  详情  -->
    <div class="detail-main mod-detail bgwh">
      <div class="wrapper photo100"> 
      	${goodsDetail.content }
      </div>
  </div>
  <div class="column-buy">
    <div class="cell">
      <div class="cell-hd"></div>
      <div class="cell-bd tl">
        <span class="f28 money pr20">
          <em class="f26 g3">结算：</em>￥
          <em class="js-money"></em>
        </span>
      </div>
      <div class="cell-fd">
        <a class="btn-buy f30 white js-buy" href="<%=basePath%>wap/pay/submitOrder?goodsSpecTimeId=${goodsDetail.id}">立即认养</a>
      </div>
    </div>
  </div>
  <link href="https://cdn.bootcss.com/ionicons/2.0.1/css/ionicons.min.css" rel="stylesheet">
  <script src="https://cdn.bootcss.com/iScroll/5.2.0/iscroll-lite.min.js"></script>
  <script src="https://cdn.bootcss.com/axios/0.16.2/axios.min.js"></script>
  <script src="static/js/layer_mobile/layer.js"></script>
  <script type="text/javascript" src="static/js/app.js"></script>
  <script type="text/javascript" src="static/js/detail.js"></script>
  <script>
  	var btn = document.querySelector('.js-buy')
  	var money = document.querySelector('.js-money')
  	var number = document.querySelector('.number-form')
  	var submitToken = document.querySelector('#submitToken')
  	var url = btn.href
  	btn.addEventListener('click',function(e){
  		e.preventDefault()
  		location.href = url+'&num='+number.value+'&totalPrice='+money.innerHTML+'&submitToken='+submitToken.value;
  	})
  </script>
</body>

</html>